<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .form {
            border: 1px solid skyblue;
        }

        td {
            border: 1px solid black;
            text-align: center;
        }

        .box {
            display: flex;
            flex-wrap: wrap;
            width: 400px;
            height: 300px;
            background: skyblue;
        }
    </style>
</head>

<body>
    <table class="form">
        <tr>
            <th>ID</th>
            <th>商品照片</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品创建时间</th>
            <th>货物库存</th>
            <th>商品详情</th>
            <th>操作</th>
            <!-- <td><button id="anniu">删除</button><input type="text"></td> -->
        </tr>
    </table>
    <button onclick="xz()">新增</button>
    <div class="box">
        <div>商品照片：<input type="text" value="" id="goodsPhoto"></div>
        <div>商品名称：<input type="text" value="" id="goodsName"></div>
        <div>商品价格：<input type="text" value="" id="goodsPrice"></div>
        <div>创建时间：<input type="text" value="" id="goodsCreationTime"></div>
        <div>货物库存：<input type="text" value="" id="goodsInventory"></div>
        <div>商品详情：<input type="text" value="" id="goodSdetail"></div>
        <!-- <button onclick="tj()">提交</button> -->
    </div>


    <script src="./jquery-3.7.1(2).js"></script>
    <script>
        $.ajax({
            url: "http://172.16.106.87:8080/ShowGoods",
            type: "get",
            data: {

            },
            success: function (itms) {
                console.log(itms.data);
                const arr = itms.data
                arr.forEach(its => {
                    let a = "";
                    a = `
         <tr>
            <td>${its.goodsId}</td>
            <td>${its.goodsPhoto}</td>
            <td>${its.goodsName}</td>
            <td>${its.goodsPrice}</td>
            <td>${its.goodsCreationTime}</td>
            <td>${its.goodsInventory}</td>
            <td>${its.goodSdetail}</td>
             <td><button onclick="del(${its.goodsId})">删除</button>
                </td>
        </tr>
                    `
                    $(".form").append(a)
                });
            }
        })

        // 删除
        function del(useradd) {
            $.ajax({
                url: "http://172.16.106.87:8080/delGoods",
                type: "get",
                data: {
                    id: useradd
                },
                success: function (del) {
                    console.log(del);
                }
            })
            location.reload()
        }
        // 新增
        $(".box").hide()
        function xz() {
            $(".box").show()
            $.ajax({
                url: "http://172.16.106.87:8080/addGoods",
                type: "post",
                data: {
                    goodsPhoto: $("#goodsPhoto").val(),
                    goodsName: $("#goodsName").val(),
                    goodsPrice: $("#goodsPrice").val(),
                    goodsCreationTime: $("#goodsCreationTime").val(),
                    goodsInventory: $("#goodsInventory").val(),
                    goodSdetail: $("#goodSdetail").val(),
                },
                success: function (it) {
                    console.log(it);
                }
            })
        }



    </script>
</body>

</html>